<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="isChecked"/>
    </label>
    <span>
          <span>已完成{{addDone}}</span> / 全部{{todoList.length}}
        </span>
    <button class="btn btn-danger" @click="deleteAllDone">清除已完成任务</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"Footer",
})
</script>

<script lang="ts" setup>
import {TodosType} from "*.vue";
import {computed} from "vue";

const props = defineProps<{
    deleteAllDone:Function,
    todoList:TodosType,
    changeAllDone:Function
}>()
const addDone = computed(()=>{
    return props.todoList.reduce((p,c)=>{
        if(c.done){
            p++
        }
        return p
    },0)
})
const isChecked = computed({
    get(){
        console.log(addDone.value)
        console.log(props.todoList.length)
        return addDone.value === props.todoList.length && props.todoList.length
    },
    set(val){
        console.log(val)
        props.changeAllDone(val)
    }
})


</script>

<style scoped>
/*footer*/
.todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}

.todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}

.todo-footer button {
    float: right;
    margin-top: 5px;
}
</style>